<template>
  <div class="order_list">
    <div v-for="(item, index) in orderList" class="order_list_item" @click="goOrders(index)">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'order',
  data() {
    return {
      orderList: [
        {
          title: '全部',
          icon: 'iconfont icon-quanbudingdan'
        },
        {
          title: '待付款',
          icon: 'iconfont icon-daifukuan'
        },
        {
          title: '代发货',
          icon: 'iconfont icon-daifahuo'
        },
        {
          title: '待收货',
          icon: 'iconfont icon-daishouhuo'
        },
        {
          title: '待评价',
          icon: 'iconfont icon-daipingjia'
        }
      ]
    }
  },
  methods: {
    goOrders(index) {
      this.$router.push({
        name: 'allorders',
        query: { index }
      })
    }
  },
}
</script>

<style scoped lang="less">
.order_list {
  width: 100%;
  height: 77px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  margin: 10px 0;

  .order_list_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .iconfont {
      font-size: 25px;
    }
  }
}
</style>

